
<style>
    .layui-input{width: 100px; height: 30px; padding:0 10px;}
    .input-group-addon{background-color:#fff; width: 33px; height: 30px;border-radius: 0; }
</style>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">新老客户交易构成</h3>
        <div class="box-tools pull-right">

            <div class="btn-group pull-right" style="margin-right: 10px">

                <input type="text" class="layui-input pull-right" id="customer_time" placeholder="自定义时间" >

                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>

            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default mouth"  data-type="2" title="上月">
                    <span class="hidden-xs">上月</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-success mouth" data-type="1" title="本月">
                    <span class="hidden-xs">本月</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default" title="导出数据">
                    <span class="hidden-xs">导出数据</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div id="main" style="width: 80%;height:400px; margin-left: 10%; text-align: center;"></div>
    </div>
</div>

<script>

    $(function () {

        var start_time = '';
        var end_time = '';

        laydate.render({
            elem: '#customer_time',
            type: 'month',
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

            }
        });










        var days_type = 1;

        $('.days').click(function () {
            $('.days.btn-success').addClass('btn-default');
            $('.days.btn-success').removeClass('btn-success');
            if ($(this).hasClass('btn-default')){
                $(this).removeClass('btn-default');
            }
            $(this).addClass('btn-success');

            days_type = $(this).data('type');
            initData();
        });

        function initData(){
            $.get('/api/getTransactionData',{'days_type':days_type,'start_time':start_time,'end_time':end_time}).done(function (res) {

                $('.experience_count').html(res.data.experience_count);
                $('.subscribe_count').html(res.data.subscribe_count);
                $('.order_count').html(res.data.order_count);
                $('.vip_count').html(res.data.vip_count);
                $('.xb_amount').html(res.data.xb_amount);
                $('.order_amount').html(res.data.order_amount);
                $('.conversion_rate').html(res.data.conversion_rate);
            });

            initCharts();
        }

        var sales_type = 0;

        $('.sales').click(function () {
            $('.sales.btn-success').addClass('btn-default');
            $('.sales.btn-success').removeClass('btn-success');
            if ($(this).hasClass('btn-default')){
                $(this).removeClass('btn-default');
            }
            $(this).addClass('btn-success');

            sales_type = $(this).data('sales_type');
            initCharts(sales_type);
        });

        var myChart = echarts.init(document.getElementById('main'));
        initCharts(0);

        function initCharts() {
            myChart.showLoading();
            $.get('/api/getSalesVolume',{'days_type':days_type,'sales_type':sales_type,'start_time':start_time,'end_time':end_time}).done(function (data) {
                myChart.hideLoading();
                option = {
                    title: {
                        //text: '销售额占比'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        data: data.data,
                        right:10,
                        formatter: function (params) {
                            for (var i = 0; i < data.data.length; i++) {
                                if (data.data[i].name == params) {
                                    return params +" ￥"+ data.data[i].value;
                                }
                            }
                        },
                    },
                    series: [
                        {
                            name:'销售额占比',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    formatter: "{b}\n\n￥{c}",
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '24'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                /*normal:{
                                 color:function(params) {
                                 var colorList = [
                                 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                 ];
                                 return colorList[params.dataIndex]
                                 }
                                 }*/
                            },
                            data:data.data
                        }
                    ]
                };
                myChart.setOption(option);
            });
        }


    });


</script>